<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'report.jsp' starting page</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<link rel="stylesheet" type="text/css" href="css/report.css">
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
			});
		</script>
		<script type="text/javascript">
			$(function () {
			    var chart;
			    $(document).ready(function() {
			        chart = new Highcharts.Chart({
			            chart: {
			                renderTo: 'container',
			                plotBackgroundColor: null,
			                plotBorderWidth: null,
			                plotShadow: false,
			                backgroundColor: '#f3f3f3'
			            },
			            credits: {
			            	enabled:false
				        },
			            title: {
			                text: '2013年04月01日 - 2013年04月30日 总共支出：￥23.00'
			            },
			            tooltip: {
			                formatter: function() {
			                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
			                }
			            },
			            lang: {
			            	downloadPNG: '导出PNG图片',
			            	downloadJPEG: '导出JPGE图片',
			            	downloadPDF: '导出PDF',
			            	downloadSVG: '导出SVG',
			            	printButtonTitle: '打印',
			            	exportButtonTitle: '导出'
				        },
			            plotOptions: {
			                pie: {
			                    allowPointSelect: true,
			                    cursor: 'pointer',
			                    dataLabels: {
			                        enabled: true,
			                        color: '#000000',
			                        connectorColor: '#000000',
			                        formatter: function() {
			                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
			                        }
			                    }
			                }
			            },
			            series: [{
			                type: 'pie',
			                name: 'Browser share',
			                data: [
			                    ['水果零食',   25.0],
			                    ['柴米油盐',   25.0],
			                    ['餐饮饮食',   25.0],
			                    ['交通通讯',   25.0],
			                    ['其他杂项',   25.0]
			                ]
			            }]
			        });
			    });
			    
			});
		</script>
	</head>

	<body style="background-image: url('img/bg.jpg');">
		<center>
			<jsp:include page="tiles-components/top.jsp"></jsp:include>
			<div style="background: url('img/conbg.gif') repeat-y;width: 998px;">
				<div style="height: 40px;width: 100%;"></div>
				<center>
					<table style="width: 980px;"> 
						<tr>
							<td>
								<div style="width: 100%;height: 38px;position: relative;">
									<a class="report1" href="javascript:void(0)">收支统计</a>
									<a class="report2" href="javascript:void(0)">年度报表</a>
								</div>
								<div style="width: 100%;height: 41px;background: url('img/titbg.jpg') repeat-x 0px -97px;"><%-- --%>
									<table width="100%" height="41px">
										<tr>
											<td width="15px">
												&nbsp;
											</td>
											<td width="120px">
												<table width="100%" height="29px">
													<tr>
														<td>
															<div style="width: 100%;height: 29px;position: relative;">
																<a class="add" href="javascript:void(0)"></a>
																<a class="reduction" href="javascript:void(0)"></a>
																<input class="dateInput" value="2013" type="text" />
															</div>
														</td>
													</tr>
												</table>
											</td>
											<td>
												<a href="javascript:void(0)" class="pre"></a>
												<a class="month" href="javascript:void(0)">1月</a>
												<a class="month" href="javascript:void(0)">2月</a>
												<a class="month" href="javascript:void(0)">3月</a>
												<a class="month" href="javascript:void(0)">4月</a>
												<a class="month" href="javascript:void(0)">5月</a>
												<a class="month" href="javascript:void(0)">6月</a>
												<a class="month" href="javascript:void(0)">7月</a>
												<a class="month" href="javascript:void(0)">8月</a>
												<a class="month" href="javascript:void(0)">9月</a>
												<a class="month" href="javascript:void(0)">10月</a>
												<a class="month" href="javascript:void(0)">11月</a>
												<a class="month" href="javascript:void(0)">12月</a>
												<a href="javascript:void(0)" class="next"></a>
												<a href="javascript:void(0)" class="date">时间范围</a>
												<a href="javascript:void(0)" class="btnDate">本季</a>
												<a href="javascript:void(0)" class="btnDate">本年</a>
											</td>
										</tr>
									</table>
								</div>
								<table width="100%">
									<tr>
										<td height="40px">
											<input type="radio" checked="checked" /> 支出
											<input type="radio" /> 收入
										</td>
									</tr>
								</table>
								<script src="js/highcharts.js"></script>
								<script src="js/exporting.js"></script>
								<div id="container" style="max-width: 980px; height: 400px; margin: 0px"></div>
							</td>
						</tr>
					</table>
				</center>
				<div style="height: 20px;width: 100%;"></div>
				<center>
					<table class="Table1">
						<tr>
							<th width="120px">记录日期</th>
							<th width="120px">分类</th>
							<th width="120px">金额</th>
							<th width="120px">账户</th>
							<th>说明</th>
						</tr>
						<tr>
							<td>2013-04-05</td>
							<td>水果零食</td>
							<td>200</td>
							<td>我的钱包</td>
							<td>无</td>
						</tr>
					</table>
				</center>
				<div style="height: 20px;width: 100%;"></div>
			</div>
			<div><img src="img/con_bottom.gif" /></div>
			<jsp:include page="tiles-components/footer.jsp"></jsp:include>
		</center>
	</body>
</html>
